import { StatusContext } from '@/views/MaterialsView/context';
import { Input } from 'antd';
import React, { useContext } from 'react';
import styled from 'styled-components';

// 创建样式化组件
const Container = styled.div`
  h2 {
    font-size: 20px;
    > span {
      margin: 0 2px;
    }
  }

  .desc {
    font-size: var(--font-size-base);
    color: var(--font-color-light);
    text-indent: 5px;
  }
`;

interface MaterialHeaderProps {
  serialNum: number | null;
  title?: string;
  desc?: string;
  titleSize?: string;
  descSize?: string;
  titleWeight?: number;
  descWeight?: number;
  titleItalic?: number;
  descItalic?: number;
  titleColor?: string;
  descColor?: string;
}

const MaterialHeader: React.FC<MaterialHeaderProps> = ({
  serialNum,
  title = '',
  desc = '',
  titleSize = '22',
  descSize = '16',
  titleWeight = 0,
  descWeight = 0,
  titleItalic = 0,
  descItalic = 0,
  titleColor = '',
  descColor = ''
}) => {
  // console.log(descColor, 'cc');
  const { updateStatus } = useContext(StatusContext);
  const inputHandle = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, type: 'title' | 'desc') => {
    const val = e.target.value;
    updateStatus(type, val);
  };
  return (
    <Container className="mb-4">
      {/* 标题 */}
      <h2
        className={`title font-300 ${!titleWeight ? 'font-bold' : ''} ${!titleItalic ? 'font-italic' : ''}`}
        style={{
          fontSize: `${titleSize}px`,
          color: titleColor
        }}>
        <span className="m-r-2">{serialNum}、</span>
        <span>{title}</span>
        {/* <Input
          value={title}
          onChange={e => inputHandle(e, 'title')}
          placeholder="请输入标题"
          style={{
            fontSize: `${titleSize}px`,
            color: titleColor
          }}
        /> */}
      </h2>
      <div
        className={`desc ${!descWeight ? 'font-bold' : ''} ${!descItalic ? 'font-italic' : ''}`}
        style={{
          fontSize: `${descSize}px`,
          color: descColor
        }}>
        {desc}
        {/* <Input.TextArea
          value={desc}
          onChange={e => inputHandle(e, 'desc')}
          placeholder="请输入描述"
          rows={4}
          style={{
            fontSize: `${descSize}px`,
            color: descColor
          }}
        /> */}
      </div>
    </Container>
  );
};

export default MaterialHeader;
